<template>
    <view>
        <z-paging ref="dataPagingRef" :fixed="true" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="loadData" :auto="true">
            <template #top>
                <view class="snowy-z-paging-item">
                    <snowy-search placeholder="请输入设备名称" v-model="searchFormData.name" @confirm="$refs.dataPagingRef.reload()" @clear="$refs.dataPagingRef.reload()" :seniorEnable="true" @seniorSearch="$refs.searchRef.open()"></snowy-search>
                </view>
                <search ref="searchRef" :searchFormData="searchFormData" @confirm="$refs.dataPagingRef.reload()"></search>
            </template>
            <view class="snowy-shadow snowy-z-paging-item snowy-padding snowy-hover" v-for="(item, index) in deviceInfoData" :key="index" @tap="moreTapItem(item, index)">
            <!-- Add device header -->
            <view class="device-header">
                <view class="device-name">{{ item.name }}</view>
                <view class="device-status" :class="getStatusClass(item.status)">{{ item.status }}</view>
            </view>
            
            <!-- Device details -->
            <uni-row class="item-uni-row">
                <uni-col :span="2" class="icon-code">
                <uni-icons size="18" type="paperclip" color="#9b51e0"></uni-icons>
                </uni-col>
                <uni-col :span="10">
                <view class="snowy-sub-title">设备编号</view>
                </uni-col>
                <uni-col :span="12">
                <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis">{{ item.code }}</view>
                </uni-col>
            </uni-row>
            
            <uni-row class="item-uni-row">
                <uni-col :span="2" class="icon-type">
                <uni-icons size="18" type="info" color="#2d9cdb"></uni-icons>
                </uni-col>
                <uni-col :span="10">
                <view class="snowy-sub-title">设备类型</view>
                </uni-col>
                <uni-col :span="12">
                <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis">{{ item.type }}</view>
                </uni-col>
            </uni-row>
            
            <uni-row class="item-uni-row">
                <uni-col :span="2" class="icon-status">
                <uni-icons size="18" type="checkbox-filled" :color="getStatusColor(item.status)"></uni-icons>
                </uni-col>
                <uni-col :span="10">
                <view class="snowy-sub-title">设备状态</view>
                </uni-col>
                <uni-col :span="12">
                <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis">{{ item.status }}</view>
                </uni-col>
            </uni-row>
            
            <uni-row class="item-uni-row">
                <uni-col :span="2" class="icon-location">
                <uni-icons size="18" type="location" color="#f2994a"></uni-icons>
                </uni-col>
                <uni-col :span="10">
                <view class="snowy-sub-title">设备位置</view>
                </uni-col>
                <uni-col :span="12">
                <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis">{{ item.location }}</view>
                </uni-col>
            </uni-row>
            
            <uni-row class="item-uni-row">
                <uni-col :span="2" class="icon-description">
                <uni-icons size="18" type="compose" color="#828282"></uni-icons>
                </uni-col>
                <uni-col :span="10">
                <view class="snowy-sub-title">设备描述</view>
                </uni-col>
                <uni-col :span="12">
                <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis">{{ item.description }}</view>
                </uni-col>
            </uni-row>
            
            <!-- Add card footer -->
            <view class="device-footer">
                <view class="view-more">查看更多</view>
            </view>
            </view>

        </z-paging>
        <snowy-float-btn v-if="$snowy.hasPerm('mobileDeviceInfoAdd')" @click="add"></snowy-float-btn>
        <more ref="moreRef" @handleOk="loadData(true)"></more>
    </view>
</template>

<script setup name="deviceinfo">
    import search from './search.vue'
    import deviceInfoApi from '@/api/biz/device-info-api'
    import more from './more.vue'
    import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
    import { reactive, ref, getCurrentInstance, nextTick } from "vue"

    const { proxy } = getCurrentInstance()
    const dataPagingRef = ref()
    const searchFormData = ref({})
    const deviceInfoData = ref([])
    const virtualListChange = (vList) => {
        deviceInfoData.value = vList
    }
    const loadData = async (pageNo, pageSize) => {
        const parameter = {
            current: pageNo,
            size: pageSize
        }
        Object.assign(parameter, searchFormData.value)
        const data = await deviceInfoApi.deviceInfoPage(parameter)
        dataPagingRef.value.complete(data?.records)
    }
    onShow(() => {
        uni.$once('formBack', (data) => {
            nextTick(() => {
            	dataPagingRef.value.reload()
            })
        })
    })
    // 新增
    const add = () => {
        uni.navigateTo({
            url: '/pages/biz/deviceinfo/form'
        })
    }
    // 更多操作
    const moreRef = ref()
    const moreTapItem = (item, index) => {
        moreRef.value.open(item)
    }
    // Add these methods to your script setup
const getStatusClass = (status) => {
  switch (status.toLowerCase()) {
    case 'online':
    case '在线':
      return 'online';
    case 'offline':
    case '离线':
      return 'offline';
    case 'maintenance':
    case '维护中':
      return 'maintenance';
    default:
      return '';
  }
};

const getStatusColor = (status) => {
  switch (status.toLowerCase()) {
    case 'online':
    case '在线':
      return '#27ae60';
    case 'offline':
    case '离线':
      return '#eb5757';
    case 'maintenance':
    case '维护中':
      return '#f2994a';
    default:
      return '#5677fc';
  }
};
</script>

<style lang="scss" scoped>
@import '@/static/scss/index.scss';

.snowy-z-paging-item {
  position: relative;
  margin: 10rpx 5%;
  border-radius: 16rpx;
  overflow: hidden;
  background: linear-gradient(to bottom right, #ffffff, #f0f8ff);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  
  &.snowy-hover {
    &:active {
      transform: scale(0.98);
      background: linear-gradient(to bottom right, #ffffff, #e6f0ff);
    }
  }
}

.snowy-padding {
  padding: 24rpx;
}

.item-uni-row {
  padding: 14rpx 0 !important;
  border-bottom: 1rpx solid rgba(86, 119, 252, 0.1);
  
  &:last-child {
    border-bottom: none;
  }
  
  .uni-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36rpx;
    height: 36rpx;
    background-color: rgba(86, 119, 252, 0.1);
    border-radius: 50%;
    padding: 6rpx;
  }
}

.device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid rgba(86, 119, 252, 0.2);
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.device-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  
  &.online {
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: 1rpx solid rgba(39, 174, 96, 0.3);
  }
  
  &.offline {
    background-color: rgba(235, 87, 87, 0.1);
    color: #eb5757;
    border: 1rpx solid rgba(235, 87, 87, 0.3);
  }
  
  &.maintenance {
    background-color: rgba(242, 153, 74, 0.1);
    color: #f2994a;
    border: 1rpx solid rgba(242, 153, 74, 0.3);
  }
}

.snowy-sub-title {
  font-size: 24rpx;
  color: #666;
}

.snowy-text-right {
  text-align: right;
  font-size: 26rpx;
  
  &.snowy-text-bold {
    font-weight: 500;
    color: #333;
  }
  
  &.snowy-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Custom icons for different field types */
.icon-code .uni-icons {
  background-color: rgba(155, 81, 224, 0.1);
  color: #9b51e0;
}

.icon-type .uni-icons {
  background-color: rgba(45, 156, 219, 0.1);
  color: #2d9cdb;
}

.icon-status .uni-icons {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
}

.icon-location .uni-icons {
  background-color: rgba(242, 153, 74, 0.1);
  color: #f2994a;
}

.icon-description .uni-icons {
  background-color: rgba(130, 130, 130, 0.1);
  color: #828282;
}

/* Add a footer to the card */
.device-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16rpx;
  margin-top: 16rpx;
  border-top: 1rpx solid rgba(86, 119, 252, 0.1);
}

.view-more {
  font-size: 24rpx;
  color: #5677fc;
  padding: 6rpx 12rpx;
}
/* 去掉搜索栏的圆滑*/
.snowy-search {
  border-radius: 0;
}
</style>

